<template>
  <div class="change-history">
    <div class="container">
      <div class="content">
        <div class="content-title">
         <h4> 变更单号：{{projectChangeData.projectChangeNo}}</h4>
         <h4> 提交时间：{{projectChangeData.submitTime?projectChangeData.submitTime:""}}</h4>
         <h4> 状态：{{changeStatus}}</h4>
         <h4 v-show="budgetChangeLog.length>0&&projectChangeData.status==3">
           预算状态：{{changeBudgetStatus}}
           <a-button type="primary" @click="showChangeBudget" size="small" style="margin-left: 10px;"> <a-icon type="ordered-list" />查看预算 </a-button>
         </h4>
        </div>
        <div class="content-container">
          <h4>变更单信息</h4>
          <ul class="change-info">
            <li>
              <img src="../../assets/dbcircle.png" alt="">
              项目变更主要责任部门：{{projectChangeData.dutyDeptName}}
            </li>
            <li>
              <img src="../../assets/dbcircle.png" alt="">
              主要负责人：{{projectChangeData.dutyUserName}}
            </li>
            <li>
              <img src="../../assets/dbcircle.png" alt="">
              变更类型：{{projectChangeData.changeType}}
            </li>
          </ul>
          <ul class="change-explain">
            <li>
              <p><a-icon type="question-circle" style="margin-right:5px;"/>变更原因说明</p>
              <a-textarea
                v-model="projectChangeData.changeReason"
                placeholder="请填写变更原因说明"
                auto-size
                readOnly
              />
            </li>
            <li>
              <p><a-icon type="edit" style="margin-right:5px;"/>变更后对项目的影响分析</p>
              <a-textarea
                v-model="projectChangeData.changeInfluence"
                placeholder="请填写变更后对项目的影响分析"
                auto-size
                readOnly
              />
            </li>
          </ul>
          <div class="influence-module">
            <h4>影响模块</h4>
            <a-table
              :columns="influenceList"
              :data-source="influenceData"
              bordered
              rowKey="person"
              :pagination="false"
              style="margin-top: 5px;margin-bottom: 40px;"
            />
          </div>
          <div class="change-record">
            <h4>变更记录</h4>
            <ul class="record-container">
              <li v-if="baseInfoChangeLog.length>0">
                <a-card size="small" title="基本信息">
                  <a-timeline>
                    <a-timeline-item v-for="log in baseInfoChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
              <li  v-if="valueTestChangeLog.length>0">
                <a-card size="small" title="价值表核心力值">
                  <a-timeline>
                    <a-timeline-item v-for="log in valueTestChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
              <li  v-if="timeChangeLog.length>0">
                <a-card size="small" title="时间表">
                  <a-timeline>
                    <a-timeline-item v-for="log in timeChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
              <li  v-if="budgetChangeLog.length>0">
                <a-card size="small" title="预算表">
                  <a-timeline>
                    <a-timeline-item v-for="log in budgetChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
              <li  v-if="teamChangeLog.length>0">
                <a-card size="small" title="团队表">
                  <a-timeline>
                    <a-timeline-item v-for="log in teamChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
              <li  v-if="attachChangeLog.length>0">
                <a-card size="small" title="上传附件">
                  <a-timeline>
                    <a-timeline-item v-for="log in attachChangeLog" v-bind:key="log.id">
                      <div >
                        {{log.userName +' '+ log.logContent }}
                      </div>
                      <div>{{log.logTime}}</div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { httpAction, getAction,postAction,postActionAsync,getActionAsync } from '@/api/manage'
export default {
  name:'ProjectModification',
  props:{
    projectChangeId:{
      type:Number,
      required:true
    }
  },
  data () {
    return {
      projectChangeData:{},
      url:{
        queryChangeById:"/projectChange/queryById",
        queryChangeInfluenceData:'/projectChange/queryChangeInfluenceData',
        queryChangeLog:'/projectChange/queryChangeLog',
      },
      influenceList: [
        {
          title: '序号',
          dataIndex: '',
          key:'rowIndex',
          width:80,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        { title: '部门', width: '50%', align: 'center', dataIndex: 'deptName', key: 'deptName'},
        { title: '人员',  align: 'center', dataIndex: 'userName', key: 'userName' },
      ],
      influenceData:[],
      baseInfoChangeLog:[],
      valueTestChangeLog:[],
      timeChangeLog:[],
      budgetChangeLog:[],
      teamChangeLog:[],
      attachChangeLog:[],
      changeStatus:'',
      changeBudgetStatus:''
    }
  },
  mounted () {
    this.getProjectChangeData();
    this.getChangeInfluenceData();
    this.getChangeLogData();
  },
  methods: {
    getProjectChangeData() {
      const that=this;
      getAction(this.url.queryChangeById, {id: this.projectChangeId}).then(res => {
        if (res.result) {
          this.projectChangeData = res.result;
          switch (this.projectChangeData.status) {
            case 1:
              that.changeStatus="创建中";
              break;
            case 2:
              that.changeStatus="待审批";
              break;
            case 3:
              that.changeStatus="审批通过";
              break;
            default:
              that.changeStatus="审批不通过";
              break;
          }
          switch (this.projectChangeData.budgetStatus) {
            case 1:
              that.changeBudgetStatus="已调整WBS";
              break;
            case 2:
              that.changeBudgetStatus="已下达";
              break;
            default:
              that.changeBudgetStatus="未下达";
              break;
          }
        } else {
          this.$message.warning('未找到相应数据');
        }
      })
    },
    getChangeInfluenceData(){
      getAction(this.url.queryChangeInfluenceData,{changeId:this.projectChangeId}).then(res=>{
        this.influenceData=res.result||[];
      })
    },
    getChangeLogData(){
      getAction(this.url.queryChangeLog,{changeId:this.projectChangeId}).then(res=>{
        let changeLogs=res.result||[];
        this.baseInfoChangeLog=changeLogs.filter(l=>l.changeTarget===1);
        this.budgetChangeLog=changeLogs.filter(l=>l.changeTarget===2);
        this.timeChangeLog=changeLogs.filter(l=>l.changeTarget===3);
        this.teamChangeLog=changeLogs.filter(l=>l.changeTarget===4);
        this.valueTestChangeLog=changeLogs.filter(l=>l.changeTarget===5||l.changeTarget===6);
        this.attachChangeLog=changeLogs.filter(l=>l.changeTarget===7);
      })
    },
    showChangeBudget(){
      let urlJump = this.$router.resolve({ path: '/projectBuildChangeBudget?projectBuildId='+this.projectChangeData.projectBuildId+'&projectChangeId='+this.projectChangeData.id })
      window.open(urlJump.href, '_blank')
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}
/deep/.ant-table-small,
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/.ant-table-thead > tr:first-child > th:last-child {
  border-radius: unset;
}
/deep/.ant-table-thead > tr > th, /deep/.ant-table-tbody > tr > td,/deep/.ant-table-tbody .ant-table-row td {
  padding: 10px 16px;
}
/deep/.ant-card-small > .ant-card-head {
  background: #f6f7f9;
}
/deep/.ant-card-small > .ant-card-body {
    padding: 25px 25px 0px 25px;
    height: 250px;
    overflow-y: scroll;
}
/deep/.ant-timeline-item-content {
  display: flex;
  justify-content: space-between;
  >div:last-child{
    min-width: 9vw;
    text-align: right;
    color:#999;
  }
}
.change-history{
  background-color: #f4f5fa;
  min-height: 100vh;
  margin-top: 20px;
  h4{
    font-weight: bolder;
    display: inline-block;
  }
  .container {
    // margin:30px 125px 0;
    height: inherit;
    .title {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
      h3 {
        font-size: 18px;
        font-weight: 600;
        margin-right: 25px;
      }
      .icon-plus {
        font-size: 13px;
        padding-right: 5px;
      }
    }
    .content {
      background-color: #fff;
      // border: 1px solid #eaeaea;
      .tip-head{
        padding: 11px 19px 0px;
        position: relative;
        top: 3px;
      }
      .content-title {
        border-bottom: 1px solid #f2f2f2;
        padding: 15px 20px;
        justify-content: space-between;
        align-items: center;
        .header{
          span{margin-right: 30px;}
        }
        h4{
          margin-right: 50px;
        }
      }
      .content-container {
        h4 {
          font-weight: bolder;
          display: inline-block;
          position: relative;
          padding-left: 13px;
          &:before{
            content: '';
            position: absolute;
            display: inline-block;
            top: 5%;
            left: 0;
            background-color: #47a4fa;
            width: 3px;
            height: 90%;
          }
        }
        padding: 20px;
        ul {
          list-style: none;
          padding: 0;
        }
        .change-info {
          display: flex;
          li {
            margin-right: 120px;
          }
        }
        .change-explain {
          li {
            margin-bottom: 15px;
          }
        }
        .influence-module {
          h4{margin: 15px 0;}
          .btn-box{margin-bottom: 10px;display: flex;
          }
        }
        .change-record {
          h4{margin: 15px 0;}
          .record-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            > li {
              width: 50%;
              margin-bottom: 15px;
              &:nth-child(odd){
                .ant-card{
                  margin-right: 1%;
                  width: 99%;
                }
              }
              &:nth-child(even){
                .ant-card{
                  margin-left: 1%;
                  width: 99%;
                }
              }
            }
          }
        }
        .btn{
          display: flex;
          justify-content: center;
          margin-top: 30px;
          >button{min-width: 150px;margin: 0 5px;}
        }
      }
      .infoTips {
        background: #e6f7ff;
        border: 1px solid #aee1ff;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        color: #888;
      }
    }
  }
}
</style>
